// ExcelJS + luckysheet.md

import { useRef, useEffect, useState } from 'react'
import LuckyExcel from 'luckyexcel'

import { Upload, Button, Space /* , Tooltip */ } from 'antd'
import {
  UploadOutlined,
  SaveOutlined
  /* BoldOutlined,
  ItalicOutlined,
  MergeCellsOutlined */
} from '@ant-design/icons'

// 使用了exceljs
import { exportSheetExcel } from './exportSheetExcel'

// 类型声明
declare global {
  interface Window {
    luckysheet: {
      create: (config: any) => void
      destroy: () => void
      getcellvalue: (row: number, col: number) => any
      getAllSheets: () => any[]
    }
  }
}

export const ExcelJsDemo = () => {
  const containerRef = useRef<HTMLDivElement>(null)
  const [fileName, setFileName] = useState('')

  // 初始化表格
  const initSpreadsheet = (data?: any[]) => {
    console.log('window.luckysheet', window.luckysheet)

    if (!window.luckysheet) return
    console.log('initSpreadsheet', data)
    let options = null

 /*    // According to the browser language
    const lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en'
    const isShare = luckysheetDemoUtil.getRequest().share // '?share=1' opens the collaborative editing mode
    const gridKey = luckysheetDemoUtil.getRequest().gridKey // workbook id for collaborative editing, or directly define here

    if (isShare || gridKey) {
      // http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
      if (!gridKey) {
        alert('If gridKey is not provided in the address bar, please add it in the source code')
      }
      options = {
        container: 'luckysheet',
        lang: lang,
        allowUpdate: true,
        updateImageUrl: location.origin + '/luckysheet/api/updateImg',
        updateUrl: 'ws://' + location.host + '/luckysheet/websocket/luckysheet',
        gridKey: gridKey,
        loadUrl: location.origin + '/luckysheet/api/load',
        loadSheetUrl: location.origin + '/luckysheet/api/loadsheet'
      }
    } */

    options = {
      container: 'luckysheet', //容器ID
      // 工作表配置
      data: data || [
        {
          name: 'Sheet1', //工作表名称
          celldata: [], //初始化使用的单元格数据
          config: {
            // merge: {}, //合并单元格
            rowlen: 25,
            columnlen: 100
            /* "rowlen":{}, //表格行高
              "columnlen":{}, //表格列宽 */
            // rowhidden: {}, //隐藏行
            // colhidden: {}, //隐藏列
            // borderInfo: {}, //边框
            // authority: {} //工作表保护
          },
          // color: '', //工作表颜色
          index: 0 //工作表索引
          // status: 1, //激活状态
          // order: 0, //工作表的下标
          // hide: 0, //是否隐藏
          // row: 36, //行数
          // column: 18, //列数
          // defaultRowHeight: 19, //自定义行高
          // defaultColWidth: 73, //自定义列宽
          // scrollLeft: 0, //左右滚动条位置
          // scrollTop: 315, //上下滚动条位置
          // luckysheet_select_save: [], //选中的区域
          // calcChain: [], //公式链
          // isPivotTable: false, //是否数据透视表
          // pivotTable: {}, //数据透视表设置
          // filter_select: {}, //筛选范围
          // filter: null, //筛选配置
          // luckysheet_alternateformat_save: [], //交替颜色
          // luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
          // luckysheet_conditionformat_save: {}, //条件格式
          // frozen: {}, //冻结行列配置
          // chart: [], //图表配置
          // zoomRatio: 1, // 缩放比例
          // image: [], //图片
          // showGridLines: 1, //是否显示网格线
          // dataVerification: {} //数据验证配置
        }
      ],
      lang: 'zh', // 设定表格语言
      //工作簿名称 title
      showinfobar: false, //信息栏
      // 工具栏
      // showtoolbar: true,
      // 自定义配置工具栏，可以与showtoolbar配合使用，showtoolbarConfig拥有更高的优先级
      showtoolbarConfig: {
        // undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
        // paintFormat: true, //格式刷
        currencyFormat: false, //货币格式
        percentageFormat: false, //百分比格式
        numberDecrease: false, // '减少小数位数'
        numberIncrease: false, // '增加小数位数
        moreFormats: false, // '更多格式'
        // font: true, // '字体'
        // fontSize: true, // '字号大小'
        // bold: true, // '粗体 (Ctrl+B)'
        // italic: true, // '斜体 (Ctrl+I)'
        // strikethrough: true, // '删除线 (Alt+Shift+5)'
        // underline: true, // '下划线 (Alt+Shift+6)'
        // textColor: true, // '文本颜色'
        // fillColor: true, // '单元格颜色'
        border: false, // '边框'
        // mergeCell: true, // '合并单元格'
        // horizontalAlignMode: true, // '水平对齐方式'
        // verticalAlignMode: true, // '垂直对齐方式'
        textWrapMode: false, // '换行方式'
        textRotateMode: false, // '文本旋转方式'
        image: false, // '插入图片'
        link: false, // '插入链接'
        chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
        postil: false, //'批注'
        pivotTable: false, //'数据透视表'
        function: true, // '公式'
        frozenMode: false, // '冻结方式'
        sortAndFilter: false, // '排序和筛选'
        conditionalFormat: false, // '条件格式'
        dataVerification: false, // '数据验证'
        splitColumn: false, // '分列'
        screenshot: false, // '截图'
        // findAndReplace: true, // '查找替换'
        protection: false, // '工作表保护'
        print: false // '打印'
      },
      showsheetbar: true, //底部sheet页
      //自定义底部sheet页
      // showsheetbarConfig: {
      //   add: false, //新增sheet
      //   menu: false, //sheet管理菜单
      //   sheet: false //sheet页显示
      // }
      //自定义单元格右键菜单
      cellRightClickConfig: {
        // copy: false, // 复制
        // copyAs: false, // 复制为
        // paste: false, // 粘贴
        // insertRow: false, // 插入行
        // insertColumn: false, // 插入列
        // deleteRow: false, // 删除选中行
        // deleteColumn: false, // 删除选中列
        // deleteCell: false, // 删除单元格
        // hideRow: false, // 隐藏选中行和显示选中行
        // hideColumn: false, // 隐藏选中列和显示选中列
        // rowHeight: false, // 行高
        // columnWidth: false, // 列宽
        // clear: false, // 清除内容
        matrix: false, // 矩阵操作选区
        sort: false, // 排序选区
        filter: false, // 筛选选区
        chart: false, // 图表生成
        image: false, // 插入图片
        link: false, // 插入链接
        data: false // 数据验证
        // cellFormat: false // 设置单元格格式
        // 用户自定义单元格右键菜单
        /* customs: [
          {
            title: `test`,
            onClick: function (clickEvent, event, params) {
              console.log('function test click', clickEvent, event, params)
            }
          }
        ]*/
      },
      //自定义sheet页右击菜单
      sheetRightClickConfig: {
        // delete: false, // 删除
        // copy: false, // 复制
        // rename: false, //重命名
        // color: false, //更改颜色
        // hide: false, //隐藏，取消隐藏
        // move: false //向左移，向右移
      },
      //唯一key gridKey
      //加载整个工作簿 loadUrl
      //加载其它页celldata loadSheetUrl
      //允许更新 allowUpdate
      //更新地址 updateUrl
      //缩略图更新地址 updateImageUrl
      //插件 plugins
      //列数 column
      //行数 row
      //亿万格式 autoFormatw
      //精度 accuracy
      //允许复制 allowCopy
      //底部计数栏 showstatisticBar
      //自定义计数栏 showstatisticBarConfig
      //允许添加行 enableAddRow
      //默认添加行的数目 addRowCount
      //允许回到顶部 enableAddBackTop
      //用户信息 userInfo
      //用户信息菜单 userMenuItem
      //返回按钮链接 myFolderUrl
      //比例 devicePixelRatio
      //功能按钮 functionButton
      //自动缩进界面 showConfigWindowResize
      //刷新公式 forceCalculation
      //行标题区域的宽度 rowHeaderWidth
      //列标题区域的高度 columnHeaderHeight
      //是否显示公式栏 sheetFormulaBar
      //初始化默认字体大小 defaultFontSize
      //是否限制工作表名长度 limitSheetNameLength
      //默认允许工作表名的最大长度 defaultSheetNameMaxLength
      //自定义图片上传 uploadImage
      //自定义图片地址处理 imageUrlHandle
      //分页器
      // pager: {
      //   pageIndex: 1, //当前页码，必填
      //   total: 100, //数据总条数，必填
      //   selectOption: [10, 20, 30], // 选择每页的行数，
      //   pageSize: 10, //每页显示多少条数据，默认10条
      //   showTotal: false, // 是否显示总数，默认关闭：false
      //   showSkip: false, //是否显示跳页，默认关闭：false
      //   showPN: false, //是否显示上下翻页，默认开启：true
      //   prevPage: '', //上翻页文字描述，默认"上一页"
      //   nextPage: '', //下翻页文字描述，默认"下一页"
      //   totalTxt: '' // 数据总条数文字描述，默认"总共：{total}"
      // }
      // 钩子函数
      hook: {
        cellDragStop: function (cell, postion, sheetFile, ctx, event) {
          // console.info(cell, postion, sheetFile, ctx, event);
        },
        rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
          // console.log(rowNum);
        },
        rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
          // console.log(ctx);
        },
        columnTitleCellRenderBefore:  (columnAbc, postion, ctx) =>{
          // console.log(columnAbc);
        },
        columnTitleCellRenderAfter:  (columnAbc, postion, ctx) =>{
          // console.log(postion);
        },
        cellRenderBefore: (cell, postion, sheetFile, ctx)=> {
          // console.log(cell,postion,sheetFile,ctx);
        },
        cellRenderAfter: (cell, postion, sheetFile, ctx)=> {
          // console.log(postion);
        },
        cellMousedownBefore: (cell, postion, sheetFile, ctx)=> {
          // console.log(postion);
        },
        // 鼠标点击后
        cellMousedown: (cell: object | null, postion: object, sheetFile: object, ctx: object) => {
          console.log(cell, postion)
        },
        sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
          // console.log(cell,postion,sheetFile,moveState,ctx);
        },
        sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
          // console.log(cell,postion,sheetFile,moveState,ctx);
        },
        cellAllRenderBefore: function (data, sheetFile, ctx) {
          // console.info(data,sheetFile,ctx)
        },
        updated: function (operate) {
          // console.info(operate)
        },
        cellUpdateBefore: function (r, c, value, isRefresh) {
          // console.info('cellUpdateBefore',r,c,value,isRefresh)
        },
        cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
          // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
        },
        sheetActivate: function (index, isPivotInitial, isNewSheet) {
          // console.info(index, isPivotInitial, isNewSheet)
        },
        rangeSelect: function (index, sheet) {
          // console.info(index, sheet)
        },
        commentInsertBefore: function (r, c) {
          // console.info(r, c)
        },
        commentInsertAfter: function (r, c, cell) {
          // console.info(r, c, cell)
        },
        commentDeleteBefore: function (r, c, cell) {
          // console.info(r, c, cell)
        },
        commentDeleteAfter: function (r, c, cell) {
          // console.info(r, c, cell)
        },
        commentUpdateBefore: function (r, c, value) {
          // console.info(r, c, value)
        },
        commentUpdateAfter: function (r, c, oldCell, newCell) {
          // console.info(r, c, oldCell, newCell)
        },
        cellEditBefore: function (range) {
          // console.info(range)
        },
        workbookCreateAfter: function (json) {
          // console.info(json)
        },
        rangePasteBefore: function (range, data) {
          // console.info('rangePasteBefore',range,data)
          // return false; //Can intercept paste
        }
      }
    }

    window.luckysheet.create(options)
  }

  // 文件导入
  const handleImport = async (file: File) => {
    // 得到xlsx文件后
    LuckyExcel.transformExcelToLucky(
      file,
      (exportJson, luckysheetfile) => {
        // 转换后获取工作表数据
        console.log('转换后获取工作表数据', exportJson)
        setFileName(file.name.replace(/\.[^/.]+$/, ''))

        initSpreadsheet(exportJson.sheets)
      },
      (error) => {
        console.log(error)
      }
    )
    return false
  }

  // 文件导出
  const handleExport = () => {
    exportSheetExcel(window.luckysheet.getAllSheets(), fileName)
  }

  // 工具栏操作
  /*   const handleFormat = (action: 'bold' | 'italic' | 'merge') => {
    const range = window.luckysheet?.getRange()
    if (!range) return

    switch (action) {
      case 'bold':
        // 实现加粗逻辑
        break
      case 'italic':
        // 实现斜体逻辑
        break
      case 'merge':
        // 合并单元格逻辑
        break
    }
  } */

  useEffect(() => {
    initSpreadsheet()
    return () => window.luckysheet?.destroy()
  }, [])

  return (
    <div style={{ width: '100%', height: '100%', padding: 16 }}>
      {/* 自定义工具栏 */}
      <Space
        style={{
          background: '#f0f2f5',
          padding: 8,
          borderRadius: 6,
          marginBottom: 16
        }}
      >
        <Upload beforeUpload={handleImport} showUploadList={false} accept=".xlsx,.xls">
          <Button icon={<UploadOutlined />}>打开</Button>
        </Upload>

        {/*     <Tooltip title="加粗">
          <Button icon={<BoldOutlined />} onClick={() => handleFormat('bold')} />
        </Tooltip>

        <Tooltip title="斜体">
          <Button icon={<ItalicOutlined />} onClick={() => handleFormat('italic')} />
        </Tooltip>

        <Tooltip title="合并单元格">
          <Button icon={<MergeCellsOutlined />} onClick={() => handleFormat('merge')} />
        </Tooltip> */}

        <Button
          type="primary"
          icon={<SaveOutlined />}
          onClick={handleExport}
          style={{ marginLeft: 'auto' }}
        >
          保存
        </Button>
      </Space>

      {/* 表格容器 */}
      <div
        id="luckysheet"
        ref={containerRef}
        style={{
          width: '100%',
          height: 'calc(100% - 48px)',
          border: '1px solid #f0f0f0',
          borderRadius: 6
        }}
      />
    </div>
  )
}
